<template>
  <el-aside class="app-aside" width="200px">
    <el-menu
      :default-active="curAside"
      :router="true"
      :unique-opened="true"
      :default-openeds="defaultOpends">
      <el-submenu
        v-for="(item, index) in navList"
        :key="index"
        :index="item.path">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(jItem, jIndex) in item.child"
            :key="jIndex"
            :index="jItem.path">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ jItem.name }}</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  <!--
    <el-menu
      :default-active="curAside"
      :router="true"
    >
      <el-submenu index="/course">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>教程</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/course">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>全部教程</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/course/primary">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>小学教程</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/course/middle">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>中学教程</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/course/high">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>大学教程</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  -->
  </el-aside>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';

  interface NavItem {
    pid: string;
    id: string;
    name: string;
    path: string;
    icon: string;
  }

  const nav = [
    { pid: '0', id: '1', name: '教程', path: '/course', icon: '' },
    { pid: '1', id: '2', name: '全部教程', path: '/course/all', icon: '' },
    { pid: '1', id: '3', name: '小学教程', path: '/course/primary', icon: '' },
    { pid: '1', id: '4', name: '中学教程', path: '/course/middle', icon: '' },
    { pid: '1', id: '5', name: '大学教程', path: '/course/high', icon: '' },
    { pid: '0', id: '6', name: '用户管理', path: '/user', icon: '' },
    { pid: '6', id: '7', name: '用户列表', path: '/user', icon: '' },
  ];

  @Component
  export default class AppSide extends Vue {
    private navList: NavItem[] = [];
    private defaultOpends: string[] = [];

    get curAside() {
      const path = this.$route.path;
      this.defaultOpends = [];
      const curNav = nav.find((item) => item.path === path) || { pid: '' };
      const parentNav = nav.find((item) => item.id === curNav.pid);
      this.defaultOpends = parentNav && parentNav.path ? [parentNav.path] : [];
      return path;
    }

    private initNav(): void {
      this.navList = [];
    }

    private created() {
      this.initNav();
    }
  }
</script>
<style lang="scss" scoped>
</style>
